<template>
  <div>
    <div>
      <ele-page
        v-loading="loading"
        :formConfig="searchDialog"
        ref="eleTable"
        :operateList="operateList"
        @handleOperateEvent="handleOperateEvent"
        :column="column"
        :getList="getList"
        uniqueId="mesProdOrderTable"
      >
      </ele-page>
    </div>
    <ele-form-drawer class="dialog-pack" :isLoading="isLoading" v-model="formDataDialog" v-bind="formDescDialog" :request-fn="handleSubmit" :visible.sync="visible" :title="title" size="60%">
    </ele-form-drawer>
    <barCodeD ref="barCode" />
  </div>
</template>

<script>
import { operateList, searchConfig, configformDescDialog, configformDescDialog_generate, rowConfig, sendThis } from './config'

import {
  getList,
  rowCreate,
  rowUpdate,
  rowDel,
  rowDetail,
  getFactoryCodeList,
  // getSaleCodeList,
  getSimulatedTypeList,
  getProdOrderTypeList,
  getMeasureUnitsList,
  getBackflushTypeList,
  getOrderBarcodeRuleList,
  getProdOrderStatusList, // 生产订单状态
  getIsRunningList,
  getBomVersionNumberList,
  rowGenerate
} from '@/api/order/mesProdOrder'
import barCodeD from './components/barCodeDe.vue'
export default {
  name: 'mesProdOrder',
  mixins: [searchConfig, configformDescDialog],
  components: { barCodeD },
  data() {
    const self = this
    return {
      bomVersionList: [],
      title: null,
      bomVersionNumberList: [],
      visible: false,
      visible_generate: false, //下发
      generateIds: [], //下发id
      isLoading: false,
      loading: false,
      formDataDialog: {},
      // formDescDialog, //新增修改框
      // searchConfig,
      operateList,
      getList,
      lineList: [], // 线体
      orderBarcodeRuleList: [], // 条码规则
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection',
          fixed: 'left'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "saleCode",
        //   label: "销售订单编码",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'planCode',
          label: $i18n.t('mesProdOrderTraceReport.productOrder'),
          minWidth: 180,
          showOverflowTooltip: true,
          fixed: 'left'
        },
        {
          prop: 'orderCode',
          label: $i18n.t('mesProdOrderTraceReport.productWorkOrder'),
          minWidth: 180,
          showOverflowTooltip: true
          // render: (h, { row }) => {
          //   return (
          //     <el-link onClick={() => self.getD(row)} type="primary">
          //       {row.orderCode}
          //     </el-link>
          //   );
          // },
        },
        {
          prop: 'prodCode',
          label: $i18n.t('mesProdOrderTraceReport.prodCode'),
          minWidth: 180,
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('mesProdOrderTraceReport.prodName'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'prodOrderType',
          label: $i18n.t('mesProdOrderTraceReport.prodOrderType'),
          minWidth: 180,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getProdOrderTypeList()
            return list.data.result
          }
        },
        // {
        //   prop: "priority",
        //   label: "订单优先级",
        //   minWidth: 100,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'quantity',
          label: $i18n.t('mesProdOrderTraceReport.planQuantity'),
          minWidth: 110,
          showOverflowTooltip: true
        },
        {
          prop: 'actualQuantity',
          label: $i18n.t('mesProdOrderTraceReport.actualQuantity'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'unit',
          label: $i18n.t('mesProdOrderTraceReport.measureUnit'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'unitCode',
          label: $i18n.t('mesProdOrderTraceReport.measureUnitCode'),
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'planBeginDate',
          label: $i18n.t('mesProdOrderTraceReport.planBeginDate'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'planEndDate',
          label: $i18n.t('mesProdOrderTraceReport.planEndDate'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'orderStatus',
          label: $i18n.t('mesProdOrderTraceReport.orderStatus'),
          minWidth: 120,
          showOverflowTooltip: true,
          optionProp: {
            value: 'value',
            label: 'description'
          },
          option: async (data) => {
            const list = await getProdOrderStatusList()
            return list.data.result
          }
        },
        {
          prop: 'workshopName',
          label: $i18n.t('common.workshopName'),
          width: 150
        },
        {
          prop: 'lineName',
          label: $i18n.t('common.lineName'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'actualBeginDate',
          label: $i18n.t('mesProdOrderTraceReport.actualBeginDate'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        {
          prop: 'actualEndDate',
          label: $i18n.t('mesProdOrderTraceReport.actualEndDate'),
          minWidth: 200,
          showOverflowTooltip: true
        },
        // {
        //   prop: "isRunning",
        //   label: $i18n.t("mesProdOrderTraceReport.isRunning"),
        //   minWidth: 180,
        //   showOverflowTooltip: true,
        //   optionProp: {
        //     value: "value",
        //     label: "description",
        //   },
        //   option: async (data) => {
        //     const list = await getIsRunningList();
        //     return list.data.result;
        //   },
        // },
        {
          prop: 'deliveryDate',
          label: $i18n.t('mesProdOrderTraceReport.deliveryDate'),
          minWidth: 120,
          showOverflowTooltip: true
        },
        {
          prop: 'slackTime',
          label: $i18n.t('mesProdOrderTraceReport.slackTime'),
          minWidth: 180,
          showOverflowTooltip: true
        }
        // {
        //   prop: "operate",
        //   label: "操作",
        //   width: 160,
        //   fixed: "right",
        //   render: (h, scope) => {
        //     return (
        //       <ele-row-operation
        //         scope={scope}
        //         rowConfig={rowConfig}
        //         onRowOperate={this.rowOperate}
        //       />
        //     );
        //   },
        // },
      ]
    }
  },
  watch: {
    'formDataDialog.prodCode': {
      handler(val, old) {
        console.log(val, old)
        if (val && val !== old) {
          this.getBomVersionNumberList()
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {},
  mounted() {
    sendThis(this)
  },
  methods: {
    getD(data) {
      //  this.$refs.barCode.visible = true;
      this.$refs.barCode.id = data.id
      this.$refs.barCode.dialogVisible = true

      this.$nextTick(() => {
        this.$refs.barCode.$refs.xTable.getTableData(true)
      })
    },
    // 表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {
        add: () => {
          this.disableFields(false)
          this.formDataDialog = {
            simulatedType: '1'
            // priority: 1,
          }
          this.visible = true
        },
        deleteBatch: () => {
          this.$confirm($i18n.t('common.deleteBatch', { name: $i18n.t('mesProdOrderTraceReport.name') }), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            const ids = data.rows.map((val) => val.id).join(',')
            this.rowDel(ids)
          })
        },
        exportExcel: () => {
          window.open('http://is.bluewhaleplat.com:8891/visual/用户画像.xlsx')
        }
      }
      fnc[data.handleName]()
    },
    // 表格行操作事件
    rowOperate({ handleName, name, row }) {
      this.title = name
      const fnc = {
        edit: () => {
          this.disableFields(false)
          this.rowDetail(row.id)
          this.visible = true
        },
        detail: () => {
          this.disableFields(true)
          this.rowDetail(row.id)
          this.visible = true
        },
        delete: () => {
          this.$confirm($i18n.t('common.deleteSingle',{name:$i18n.t('mesProdOrderTraceReport.name2')}), $i18n.t('common.tip'), {
            confirmButtonText: $i18n.t('common.ok'),
            cancelButtonText: $i18n.t('common.cancel'),
            type: 'warning'
          }).then(() => {
            this.rowDel(row.id)
          })
        }
      }
      fnc[handleName]()
    },
    doSubmit({ title, api, data }) {
      this.isLoading = true
      api(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || title)
          this.visible = false
          this.visible_generate = false
          this.refresh()
        })
        .finally(() => {
          this.isLoading = false
        })
    },
    // 弹框提交事件
    handleSubmit(data) {
      if (this.isLoading) return // 判断状态
      const params = this.formDataDialog.id ? { title: $i18n.t('common.editSuccess'), api: rowUpdate, data } : { title: $i18n.t('common.addSuccess'), api: rowCreate, data }
      this.doSubmit(params)
    },
    // 下发-弹框提交事件
    generateSubmit(data) {
      if (this.isLoading) return // 判断状态
      // console.log("this.lineList=", this.lineList);
      const item_line = this.lineList.find((val) => val.code == data.modelingCode)
      data.lineName = item_line.modelingName

      const item = this.orderBarcodeRuleList.find((val) => val.code == data.orderBarcodeRuleCode)
      data.orderBarcodeRuleName = item.description
      data.ids = this.generateIds.split(',')
      const params = { title: $i18n.t('mesProdOrderTraceReport.msg6'), api: rowGenerate, data }
      this.doSubmit(params)
    },
    // 删除
    rowDel(data) {
      this.loading = true
      rowDel(data)
        .then((res) => {
          const message = res.data.message
          this.$message.success(message || $i18n.t('common.deleteSuccess'))
          this.refresh()
        })
        .finally(() => {
          this.loading = false
        })
    },
    disableFields(flag) {
      this.formDescDialog.disabled = flag
      this.formDescDialog.isShowSubmitBtn = !flag
    },

    rowDetail(id) {
      rowDetail(id).then((res) => {
        this.formDataDialog = res.data.result
      })
    },
    // 刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    },
    // BOM配方版本号
    getBomVersionNumberList() {
      const { prodCode, seriesCode } = this.formDataDialog
      if (!prodCode) {
        this.bomVersionList = []
        return
      }
      const data = {
        materialCode: prodCode,
        serielsCode: seriesCode
      }
      getBomVersionNumberList(data).then((res) => {
        this.bomVersionList = res.data.result
        this.$set(this.formDataDialog, 'bomVersion', '')
      })
    }
  }
}
</script>
